<template>
  <div class="app">
    <el-row :gutter="24">
      <el-col :span="8">
        <dv-decoration-3 style="height: 6vh"></dv-decoration-3>
      </el-col>
      <el-col :span="8">
        <dv-decoration-7 style="height: 6vh;color: #00afff;font-size: 35px"><span class="system-title">试验室展示平台</span>
        </dv-decoration-7>
      </el-col>
      <el-col :span="8">
        <dv-decoration-3 :reverse="true" style="height: 6vh"></dv-decoration-3>
      </el-col>
    </el-row>

    <!--左上模块 科研立项-->
    <div class="upperLeft">

      <div style="display: flex; align-items: center;">

        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">模块名称</span>
      </div>
      <div style="height: 0.5vh"></div>
    </div>

    <!--中上模块 科技成果数据统计（当年）-->
    <div class="soSo">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">模块名称</span>
      </div>
      <div style="height: 0.5vh"></div>

    </div>

    <!--右上模块 成果鉴定-->
    <div class="upperRight">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">模块名称</span>
      </div>
      <div style="height: 0.5vh"></div>
    </div>

    <!--左中模块 企业工法-->
    <div class="leftMiddle">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">模块名称</span>
      </div>
      <div style="height: 0.5vh"></div>
    </div>

    <!--中间模块 荣誉图片轮播-->
    <div class="middle">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">图片轮播</span>
      </div>
      <div style="height: 0.5vh"></div>
      <div style="font-size: 16px;">
        <el-carousel :interval="5000" height="24vh" arrow="always" style="max-width: 94%; margin: auto;">
          <el-carousel-item v-for="item in oneCompanyHonorList" :key="item.name">
            <img :src="item.src" style="height:100%;width:100%;" alt="图片丢失了" :title="item.title"/>
          </el-carousel-item>
        </el-carousel>
      </div>


    </div>

    <!--中下模块 会议安排-->
    <!--        <div class="lowermiddle">-->
    <!--            <div style="display: flex; align-items: center;">-->
    <!--                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>-->
    <!--                <span style="color: white">会议安排</span>-->
    <!--            </div>-->

    <!--        </div>-->

    <!--右中模块 科技进步奖（当年）-->
    <div class="rightMiddle">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">模块名称</span>
      </div>
      <div style="height: 0.5vh"></div>

    </div>

    <!--左下模块 专利申请-->
    <div class="lowerLeft">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">模块名称</span>
      </div>
      <div style="height: 0.5vh"></div>


    </div>

    <!--中下模块 专利授权-->
    <div class="lowerMiddle">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">模块名称</span>
      </div>
      <div style="height: 0.5vh"></div>

    </div>

    <!--右下模块 省部级工法（当年）-->
    <div class="lowerRight">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">模块名称</span>
      </div>
      <div style="height: 0.5vh"></div>

    </div>


  </div>
</template>
<script>

export default {
  data() {
    return {
      visible: false,
      oneCompanyHonorList: [ //荣誉图片
        {
          name: "Cauliflower",
          src: require("@/assets/images/profile.jpg"),
          title: ""
        },
      ],
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped>
.app {
  position: relative;
  background: url('../assets/images/bg.png') center center no-repeat, #040505; /*添加背景图片和颜色*/
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  border: 1px solid #0C1723;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.upperLeft {
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 67%; /* 距离下面 60% */
  left: 1%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5); /* 模块背景颜色 并透明显示 */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.upperLeft:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 中上 */
.soSo {
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 67%; /* 距离下面 60% */
  left: 33%; /* 距离左侧1% */
  width: 34%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.soSo:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 右上 */
.upperRight {
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 67%; /* 距离下面 60% */
  left: 68%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.upperRight:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 左中 */
.leftMiddle {
  position: absolute;
  top: 34%; /* 距离上面 43% */
  bottom: 33%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width: 36%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.leftMiddle:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 中 */
.middle {
  position: absolute;
  top: 34%; /* 距离上面 43% */
  bottom: 33%; /* 距离下面 50% */
  left: 38%; /* 距离左侧1% */
  width: 25%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

/* 右中 */
.rightMiddle {
  position: absolute;
  top: 34%; /* 距离上面 43% */
  bottom: 33%; /* 距离下面 50% */
  left: 64%; /* 距离左侧1% */
  width: 35%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.rightMiddle:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 左下 */
.lowerLeft {
  position: absolute;
  top: 68%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.lowerLeft:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 中下 */
.lowerMiddle {
  position: absolute;
  top: 68%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 33%; /* 距离左侧1% */
  width: 34%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.lowerMiddle:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 右下 */
.lowerRight {
  position: absolute;
  top: 68%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 68%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.lowerRight:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}



/deep/.border-box-content {
  color: rgb(66, 185, 131) !important;
  font-size: 40px !important;
  font-weight: bold !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
/deep/.el-table--mini {
  font-size: 11px !important;
}

/deep/.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  background-color: #0B243F !important;
}

/deep/.el-table__body, .el-table__footer, .el-table__header {
  font-size: 16px !important;
}

/deep/.el-table th.el-table__cell>.cell {
  color: #00AFE0 !important;
}

/deep/.el-table td.el-table__cell div {
  color: white !important;
}

/deep/.el-table__body tr:hover > td {
  background-color: #788081 !important; /* 鼠标移入ElTable后的行背景色 */
}
</style>
